<template>
	<view style="width: 100%; height: 100%;">
		<view class="status-bar">  
			<view class="top-view"></view>  
		</view>
		<view class="tab-btn">
			<view class="tab-btn-list">
				<view :class="{ 'tab-btn-item' : true, 'active' : tabIndex === index }" v-for="(item, index) in tableList" :key="index" @click="switchType(index)">{{item.Type}}</view>
			</view>
		</view>
		
		<view class="table-list">
			<view v-for="(item, index) in tabData" :key="index" :class="{ 'table-item' : true, 'active' : !(item.table_state === '0') }" @click="selectTable(item)">
				<view v-if="!(item.table_state === '0')" class="table-icon" style="background-image: url('../../static/images/table-active-icon.png');"></view>
				<view v-else class="table-icon" style="background-image: url('../../static/images/table-icon.png');"></view>
				<view>{{item.table_number}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../static/js/api.js';
	import utils from '../../common/utils.js';
	
	export default {
		data(){
			return {
				tableList : [],
				tabIndex : 0,
			};
		},
		computed : {
			tabData(){
				if(this.tableList.length <= 0){
					return [];
				}
				return this.tableList[this.tabIndex]['Data'];
			},
		},
		onLoad() {
			let self = this;
			let userInfo = api.getUserInfo();
			api.request('/tables/ajax/GetTableAllAndMoney.ashx', {
				dataType : 'jsonp',
				data : {
					tokenId: userInfo.tokenId,  //設備號
					deviceId: utils.getUUID(),   //用戶名
				},
				success(data){
					self.tableList = data;
				},
				fail(data){
					if(data === '()'){
						uni.showToast({
							title : '數據加載錯誤',
							icon : 'none',
						});
						return;
					}
					
					uni.showToast({
						title : data['msg'],
						icon : 'none',
					});
					uni.navigateTo({
						url:'../user/login',
					});
				},
				error(data){
					console.log(data);
				},
			});
		},
		methods: {
			switchType(index) {
				this.tabIndex = index;
			},
			selectTable(item){
				let self = this;
				let userInfo = api.getUserInfo();
				
				api.request('/padsales/GetDateInterval.ashx', {
					data : {
						tokenId : userInfo.tokenId,
					},
					success(data){
						let date = new Date(data['DateInterval']).format('yyyy/MM/dd');
						api.request('/padsales/BeginTable.ashx', {
							data : {
								tablenb : item.table_number,
								peoplenb : '1',
								usernb : userInfo.usernb,
								posnb : 'Pad',
								phone : '',
								dateinterval : date,
								tokenId : userInfo.tokenId,
							},
							success(data){
								uni.reLaunch({
									url: `../index/index?id=${data.Id}&key=${userInfo.key}&tablenb=${item.table_number}`,
								});
							},
							fail(data){
								if(parseInt(data['State']) === 1){
									api.request('/padsales/GetTableFoods.ashx', {
										data : {
											tablenb : item.table_number,
											tokenId : userInfo.tokenId,
										},
										success(data){
											console.log(data);
										},
										fail(data){
											uni.reLaunch({
												url: `../index/index?id=${data.Id}&key=${userInfo.key}&tablenb=${item.table_number}`,
											});
										}
									});
								}
							},
							error(data){
								console.log(data);
							},
						});
					},
				});
			},
		},
	};
</script>

<style lang="scss">	
	.tab-btn{
		height: 110upx;
		
		.tab-btn-list{
			position: fixed;
			width: 100%;
			height: 100upx;
			box-shadow: 0px 10px 10px 0px rgba(70, 70, 70, 0.22);
			display: flex;
			flex-direction: row;
			flex-wrap:nowrap;
			overflow: auto;
			padding: 20upx 20upx;
			
			.tab-btn-item{
				padding:10upx 20upx;
				margin-right: 20upx;
				border-radius: 5upx;
				color: #333333;
				
				&.active{
					background-color: #f5cc51;
					color: #fff;
				}
			}
		}
	}
	
	.table-list{
		padding: 40upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		
		.table-item{
			text-align: center;
			color: #999999;
			width: 20%;
			margin-bottom: 20upx;
			
			&.active{
				color: #efcc5a;
			}
			
			.table-icon{
				width: 150upx;
				height: 150upx;
				margin: auto;
				margin-bottom: 10upx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
		}
	}
	
	
</style>
